<template>
  <n-el tag="div" class="main-box">
    <n-el tag="div" class="item-box" v-for="item in props.data" :key="item" @click="handleClick(item)">
      <n-space justify="center">
        <n-image
            width="280"
            height="280"
            :src="item.image"
        />
      </n-space>
      <n-el tag="div" class="desc-box">
        <n-space justify="start">
          <n-ellipsis class="item-title" :line-clamp="2" style="color: white">
            {{item.title}}
          </n-ellipsis>
        </n-space>
        <n-space justify="start">
          <n-ellipsis class="item-title" :line-clamp="2" style="color: white">
            {{item.subtitle}}
          </n-ellipsis>
        </n-space>
      </n-el>
      <n-el tag="div" class="tag-box">
        <n-el tag="span" class="item-tag" v-for="tag in item.tag" :key="tag">{{tag}}</n-el>
      </n-el>
      <n-el tag="div" class="like-box">
        <n-el tag="span" class="item-like" >点赞 {{item.like}}</n-el>
        <n-el tag="span" class="item-like" >分享 {{item.share}}</n-el>
        <n-el tag="span" class="item-like" >评论 {{item.comment}}</n-el>
        <n-el tag="span" class="item-like" >收藏 {{item.collect}}</n-el>
      </n-el>
    </n-el>
  </n-el>
</template>

<script setup lang="ts">

import defaultImage from "/@assets/header.png";

// eslint-disable-next-line no-undef
const props = defineProps({
  data:{
    type: Array,
    default: () => [
      {
        image: defaultImage,
        title: "物品标题",
        subtitle: "物品描述",
        tag: ["标签1","标签2","标签3"],
        like: 10000,
        share: 10000,
        comment: 10000,
        collect: 10000,
      },
    ],
  },
});

//定义派发事件
const emit = defineEmits(["getItem"]);

// 点击事件 由父组件实现
const handleClick = (item: any) => {
  emit("getItem", item);
};

</script>

<style scoped lang="scss">

.main-box{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.item-box{
  width: 280px;
  height: 280px;
  background: rgba(162, 161, 161, 0.13);
  margin: 10px;
}

.desc-box{
  width: 280px;
  height: 90px;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0;
}

.tag-box{
  width: 280px;
  height: 30px;
  position: absolute;
  top: 25px;
  .item-tag{
    margin-left: 5px;
    background: rgba(211, 7, 7);
    color: #ffffff;
    font-size: 16px;
  }
}

.like-box{
  width: 280px;
  height: 30px;
  position: absolute;
  bottom: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .item-like{
    background: rgba(234, 141, 141, 0.1);
    color: #ffffff;
    font-size: 12px;
  }
}

.item-title{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item-price{
  color: #ff6201;
  font-size: 24px;
  line-height: 24px;
}

.item-sellNum{
  color: #ffffff;
  font-size: 12px;
}

.item-city{
  color: #ffffff;
  font-size: 12px;
}



</style>